<template>
    <div>
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="handleClick('FILTER')"
            @reset="handleClick('RESET')"
        >
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="90px">
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('courseSummary.aduitType') +'：'">
                            <el-select
                                v-model="queryForm.status"
                                filterable
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.auditStatusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('exempt.baseInfo.applicationMode')+'：'">
                            <el-select
                                v-model="queryForm.applyType"
                                filterable
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.applicationModeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('label.stuName')+'：'">
                            <el-input v-model="queryForm.keyWords" clearable :placeholder="$t('label.studentName')+'/'+$t('label.studentCode')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('course.course')+'：'">
                            <el-input
                                clearable
                                v-model="queryForm.course"
                                :placeholder="$t('course.courseName')+'/'+$t('course.courseCode')"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('course.college')+'：'">
                            <el-select
                                v-model="queryForm.faculty"
                                filterable
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.collegeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('exempt.electiveSemester')+'：'">
                            <CalendarSelect
                                v-model="queryForm.electiveSemester"
                                @load-done="loadDone"
                            ></CalendarSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card>
            <h1 slot="header">{{$t('exempt.title')+$t('exempt.baseInfo.auditList')}}</h1>
            <edu-table
                stripe
                :selection="false"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :pageNum="queryForm.pageNum_"
                :data="auditList"
                style="width: 100%"
                tooltip-effect="light"
                @page-change="handleCurrentChange"
                @selection-change="selectionChange"
            >
                <el-table-column :label="$t('label.stuName')" prop="studentName" show-overflow-tooltip />
                <el-table-column :label="$t('label.stuCode')" prop="studentId" />
                <el-table-column :label="$t('label.classCode')" prop="classCode" />
                <el-table-column :label="$t('label.courseCode')"  prop="courseCode" />
                <el-table-column
                    :label="$t('label.courseName')"
                    prop="courseName"
                    min-width="120"
                    show-overflow-tooltip
                />
                <el-table-column
                    :label="$t('label.openClassCollege')"
                    prop="collegeI18n"
                    min-width="100"
                    show-overflow-tooltip
                />
                 <el-table-column
                    :label="$t('exempt.electiveSemester')"
                    prop="electiveSemesterName"
                    width="170"
                    show-overflow-tooltip
                />
                <el-table-column :label="$t('exempt.baseInfo.applicationMode')" >
                    <template slot-scope="scope">
                        {{scope.row.applyType == '1' ?$t('exempt.baseInfo.noListening'):$t('exempt.baseInfo.noTraining')}}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('label.credits')" prop="credits" />
                <el-table-column :label="$t('exempt.baseInfo.hours')" prop="hours" />
                <el-table-column :label="$t('courseSummary.aduitType')" min-width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 2 || scope.row.status == 5" type="danger">
                            {{ scope.row.statusI18N }}
                        </el-tag>
                        <el-tag
                            v-else-if="scope.row.status == 3 || scope.row.status == 4"
                            type="success"
                        >
                            {{ scope.row.statusI18N }}
                        </el-tag>
                        <el-tag v-else>{{ scope.row.statusI18N }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('label.operation')" width="130">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClick('VIEW', scope.row)">
                            {{$t('message.Look')}}
                        </el-button>
                        <el-button
                            type="text"
                            v-if="scope.row.isApproveShow * 1 == 0"
                            @click="handleClick('AUDIT', scope.row)"
                        >
                            {{$t('message.check')}}
                        </el-button>
                        <el-button
                            type="text"
                            v-if="scope.row.status == 3"
                            @click="handleClick('RECALL', scope.row)"
                        >
                        {{$t('message.recall')}}
                        </el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { getFacultys } from 'common/src/api/culture/bachelor'
import { exApprovedList, recall, exSwitch, editStudyType} from 'common/src/api/exempt/exempt'
export default {
    data() {
        return {
            queryForm: {
                status: '',
                applyType: '',
                keyWords: '',
                course: '',
                faculty: '',
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                electiveSemester: ''
            },
            options: {
                auditStatusList: [
                    {
                        value: 1,
                        label: '待审核'
                    },
                    {
                        value: 2,
                        label: '已驳回'
                    },
                    {
                        value: 3,
                        label: '已通过'
                    },
                    // {
                    //     value: 4,
                    //     label: '行政学院已通过'
                    // },
                    // {
                    //     value: 5,
                    //     label: '行政学院已驳回'
                    // }
                ],
                applicationModeList: [
                    {
                        value: '0',
                        label: '免修'
                    },
                    {
                        value: '1',
                        label: '免听'
                    }
                ],
                collegeList: []
            },
            auditList: []
        }
    },
    mounted() {
        this.getFacultys()
        this.getAuditList()
    },
    methods: {
        // 获取开课学院
        async getFacultys() {
            let { code, data } = await getFacultys()
            if (code !== 200) return
            data.splice(data.findIndex(c => c.deptCode == '-10000'), 1)
            this.options.collegeList = data.map(c => {
                return {
                    value: c.deptCode,
                    label: 'en' == this.$store.getters.language ? c.deptNameEn : c.deptName
                }
            })
        },
        async getAuditList(params = this.queryForm) {
            let { code, data } = await exApprovedList(params)
            if (code !== 200) return
            this.auditList = data.list
            this.queryForm.pageNum_ = data.pageNum_
            this.queryForm.pageSize_ = data.pageSize_
            this.queryForm.total_ = data.total_
        },
        handleClick(mode, params) {
            switch (mode) {
                //筛选列表
                case 'FILTER':
                    this.getAuditList()
                    break
                case 'RESET':
                    for (let key in this.queryForm) {
                        if (key == 'pageNum_') {
                            this.queryForm[key] = 1
                        } else if (key == 'pageSize_') {
                            this.queryForm[key] = 20
                        } else if (key == 'total_') {
                            this.queryForm[key] = 0
                        } else {
                            this.queryForm[key] = ''
                        }
                    }
                    this.getAuditList()
                    break
                case 'AUDIT':
                    this.$router.push({
                        name: 'EXLAuditDetail',
                        query: Object.assign(params, {
                            mode: 'AUDIT'
                        })
                    })
                    break
                case 'VIEW':
                    this.$router.push({
                        name: 'EXLAuditDetail',
                        query: Object.assign(params, {
                            mode: 'VIEW'
                        })
                    })
                    break
                case 'RECALL':
                    this.$confirm('确认撤回本条审核记录吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.recallFn(params);
                    })
            }
        },
        async recallFn(params) {
            let {code} = await recall({no: params.workflowNo});
            if (code == 200) {
                exSwitch({
                    mode: '0'
                }).then(res =>{
                    if (res.code == 200) {
                        let calendarId = res.data && res.data[0] && res.data[0].calendarId || '';
                        editStudyType({
                            studentId: params.studentId,
                            courseCode: params.courseCode,
                            calendarId: calendarId,
                            courseTakeType: params.applyType == '1' ? '4' : '3',
                            mxbmkType: 2   // 1-审核通过  2-撤回
                        }).then(response =>{
                            if (response.code == 200) {
                                this.$message({
                                    message: '撤回成功',
                                    type: 'success'
                                });
                                this.getAuditList();
                            }
                        })
                    }
                })
            }
        },
        // 分页页数变化时回调
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize
            this.queryForm.pageNum_ = val.pageNum
            this.getAuditList()
        },
        loadDone() {
            this.getAuditList();
        }
    }
}
</script>